<template>
    <div id="Content">

    <div id="BackLink">
        <!-- <a th:href="@{/catalog/viewCategory(categoryId=${product.categoryId})}">{{categoryId}}</a> -->
        <router-link :to="'/catalog/category?categoryId=' + categoryId">{{categoryId}}</router-link>
    </div>

    <div id="Catalog">

        <h2>{{name}}</h2>

        <table>
            <tr>
                <th>Item ID</th>
                <th>Product ID</th>
                <th>Description</th>
                <th>List Price</th>
                <th>&nbsp;</th>
            </tr>

            <tr v-for="item in items">
                <td><router-link :to="'/catalog/item?itemId=' + item.itemId">{{item.itemId}}</router-link></td>
                <td>{{item.productId}}</td>
                <td>{{item.productDescription}} {{item.attribute1}}</td>
                <td>{{item.listPrice}}</td>
                <td><a class="Button" href="#">Add to Cart</a></td>
            </tr>

            <!-- <tr th:each="item:${itemList}">
                <td><a th:href="@{/catalog/viewItem(itemId=${item.itemId})}" th:text="${item.itemId}"></a></td>
                <td th:text="${item.product.productId}"></td>
                <td th:text="${item.attribute1} + ${item.product.name}"></td>
                <td th:text="${item.listPrice}"></td>
                <td th:if="${item.quantity gt 0}">
                    <a class="Button" th:href="@{/cart/addCartItem(itemId=${item.itemId})}">Add to Cart</a>
                </td>
                <td th:if="${item.quantity le 0}">
                    <a class="Button" disabled="disabled" style="background-color: #444444">Sold Out</a>
                </td>
            </tr> -->
        </table>

    </div>
</div>
</template>

<script>
    export default {
        name: "Product",
        data(){
            return {
                productId: '',
                name: '',
                categoryId: '',
                items: [
                    {
                        itemId: '',
                        productId: '',
                        listPrice: '',
                        attribute1: '',
                        productDescription: ''
                    }
                ]
            }
        },
        created()
        {
            const _this = this
            axios.get('http://localhost:8088/catalog/products/' + this.$route.query.productId).then(function (resp) {
                _this.productId = resp.data.data.productId
                _this.name = resp.data.data.name
                _this.categoryId = resp.data.data.categoryId
            })
            axios.get('http://localhost:8088/catalog/products/' + this.$route.query.productId + '/items').then(function (resp) {
                _this.items = resp.data.data
                console.log(resp)
            })
        }
    }
</script>

<style scoped>
    @import "../../assets/css/jpetstore.css";
</style>